<template>
    <div class="layout">
        <el-container class="layout-container">
            <!-- 左侧菜单 -->
            <el-aside width="200px">
                <div class="el-aside__logo"></div>
                <el-menu active-text-color="blue" background-color="rgb(236, 240, 240)" text-color="black" router>
                    <el-menu-item index="/index">
                        <template #title><i style="font-size:20px" class="el-icon-house"></i>
                            <span>首页</span>
                        </template>
                    </el-menu-item>

                    <el-menu-item index="/student" v-if="this.user.data.rolename == '管理员'">
                        <template #title><i style="font-size:20px" class="el-icon-user"></i>
                            <span>学生管理</span>
                        </template>
                    </el-menu-item>

                    <el-menu-item index="/teacher" v-if="this.user.data.rolename == '管理员'">
                        <template #title><i style="font-size:20px" class="el-icon-s-custom"></i>
                            <span>教师管理</span>
                        </template>
                    </el-menu-item>

                    <el-menu-item index="/class" v-if="this.user.data.rolename == '管理员'">
                        <template #title><i style="font-size:20px" class="el-icon-star-on"></i>
                            <span>班级管理</span>
                        </template>
                    </el-menu-item>

                    <el-submenu v-if="this.user.data.rolename == '管理员'" index="1">
                        <template #title>
                            <i style="font-size:20px" class="el-icon-notebook-2"></i>
                            <span>课程管理</span>
                        </template>
                        <el-menu-item index="/course">
                            <template #title><i style="font-size:20px" class="el-icon-collection"></i>
                                <span>课程信息</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="/sharecourse">
                            <template #title><i style="font-size:20px" class="el-icon-thumb"></i>
                                <span>课程分配信息</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>

                    <el-submenu index="2">
                        <template #title>
                            <i style="font-size:20px" class="el-icon-user"></i>
                            <span>我的信息</span>
                        </template>
                        <el-menu-item index="/SpersonMsg" v-if="this.user.data.rolename == '学生'">
                            <template #title><i style="font-size:20px" class="el-icon-s-custom"></i>
                                <span>学生个人信息</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="/TpersonMsg" v-if="this.user.data.rolename == '教师'">
                            <template #title><i style="font-size:20px" class="el-icon-s-custom"></i>
                                <span>教师个人信息</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="/editPwd">
                            <template #title><i style="font-size:20px" class="el-icon-edit"></i>
                                <span>修改密码</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>

                    <el-submenu v-if="this.user.data.rolename !='管理员'" index="3">
                        <template #title>
                            <i style="font-size:20px" class="el-icon-notebook-2"></i>
                            <span>我的课程</span>
                        </template>
                        <el-menu-item index="/CourseMsg">
                            <template #title><i style="font-size:20px" class="el-icon-s-custom"></i>
                                <span>课程信息</span>
                            </template>
                        </el-menu-item>
                         <el-menu-item index="/GradeVue" v-if="this.user.data.rolename == '学生'">
                        <template #title><i style="font-size:20px" class="el-icon-s-claim"></i>
                            <span>课程成绩</span>
                        </template>
                    </el-menu-item>
                    </el-submenu>

                   
                </el-menu>

            </el-aside>
            <!-- 右侧主区域 -->
            <el-container>
                <!-- 头部区域 -->
                <el-header>
                    <div><span>用户：{{ name }}</span></div>
                    <el-dropdown placement="bottom-end">
                        <span class="el-dropdown__box">
                            <el-avatar :src="avatarUrl" />
                            <el-icon>
                                <CaretBottom />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item icon="el-icon-switch-button"><a
                                        @click="logout">退出登录</a></el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </el-header>
                <!-- 中间区域 -->
                <el-main>
                    
                    <router-view></router-view>
                </el-main>
                <!-- 底部区域 -->
                <el-footer>电气与信息工程学院教务评分系统 ©2024 Created by four</el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import request from '@/utils/request';


// import request from "@/utils/request";


export default {
    data() {
        return {
            name:'管理员',
            user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
            avatarUrl: 'https://ts1.cn.mm.bing.net/th?id=OIP-C.5I8dce991gGJ1yTATZJKnQAAAA&w=183&h=183&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2'
        }
    },
    created() {

        if (this.user.data.rolename == '学生') {
            this.getStuInfo()
        } else if (this.user.data.rolename == '教师') {
            this.getTeaInfo()
        }
    },

    methods: {

        //学生信息
        getStuInfo() {
            request.get("/stu/findstu", {
                params: {
                    id: this.user.data.userid
                }
            }).then(res => {
                if (res.data.code == 0) {
                    localStorage.setItem("stuid",JSON.stringify(res.data.data.stuid));//存储用户信息到浏览器
                    this.name=res.data.data.name
                    this.avatarUrl = res.data.data.avatar
                    console.log(this.avatarUrl)
                    console.log(localStorage.getItem("stuid"))
                } else {
                    this.$message.error('头像获取失败');
                }
            }).catch(error => {
                console.error("获取信息时发生错误:", error);
                this.$message({
                    message: '获取信息时发生错误，请重试',
                    type: 'error'
                });
            });
        },


        //教师信息
        getTeaInfo() {
            request.get("/tea/findtea", {
                params: {
                    id: this.user.data.userid
                }
            }).then(res => {
                if (res.data.code == 0) {
                    this.name=res.data.data.name
                    this.avatarUrl = res.data.data.avatar
                    console.log(this.avatarUrl)
                } else {
                    this.$message.error('头像获取失败');
                }
            }).catch(error => {
                console.error("获取信息时发生错误:", error);
                this.$message({
                    message: '获取信息时发生错误，请重试',
                    type: 'error'
                });
            });
        },
        // userInfo() {
        //     request.get('/user/userInfo').then(res=>{
        //         console.log('res.data.data')
        //         res.data.data=this.user.username
        //     })
        // }


        logout() {
            localStorage.removeItem('user')
            localStorage.removeItem("stuid")
            this.$message.success('已成功退出')
            this.$router.push('/login');
        }
    }

}


</script>

<style lang="less" scoped>
.layout-container {
    height: 100vh;

    .el-aside {
        background-color: rgb(236, 240, 240);
        border-right: none;

        &__logo {
            height: 60px;
            background: url('@/assets/jiaowu.png') no-repeat center / 200px auto;
        }

        .el-menu {
            border-right: none;
        }
    }

    .el-header {
        background-color: rgb(236, 240, 240);
        display: flex;
        align-items: center;
        justify-content: space-between;

        .el-dropdown__box {
            display: flex;
            align-items: center;

            .el-icon {
                color: #993d3d;
                margin-left: 10px;
            }

            &:active,
            &:focus {
                outline: none;
            }
        }
    }

    .el-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        background: rgb(236, 240, 240);
        color: #7b7878;
    }

}
</style>